<template>
  <div class="listhead">
    <h1>List Task</h1>
    <!-- Form -->
    <el-button type="text" @click="dialogFormVisible = true" class="createBtn"
      ><el-button type="primary">创建任务</el-button></el-button
    >

    <el-dialog
      title="新增任务"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :before-close="onBeforeClose"
    >
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item
          label="活动名称"
          :label-width="formLabelWidth"
          prop="eventName"
        >
          <el-input v-model="form.eventName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form :rules="rules" ref="ruleForm1">
        <el-form-item prop="value1">
          <!-- 日期选择器 -->
          <div class="block">
            <span class="demonstration">默认</span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible = false;
            
            submitForm();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-divider></el-divider>
  </div>
</template>

<script>
export default {
  props: ["eventbus"],
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        eventName: "",
      },
      formLabelWidth: "120px",
      rules: {
        eventName: [
          {
            required: true,
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
        ],
        value1: [
          {
            required: true,

            message: "必须填写",
            trigger: "blur",
          },
        ],
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  methods: {
    handle(name, time,id) {
      if (name.length < 3 || name.length > 30) {
        return;
      }
      this.eventbus.$emit("addEvent", name, time,id);
    },

    submitForm() {
      let _this = this
      

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert("submit!");
          this.$axios
        .get("/addTasks", {
          params: {
            detail: _this.form.eventName,
            time: new Date(_this.value1[0]).getFullYear() +'年'+ new Date(_this.value1[0]).getMonth()+'月'+ new Date(_this.value1[0]).getDate() + '日' +'至' +new Date(_this.value1[1]).getFullYear() +'年'+ new Date(_this.value1[1]).getMonth()+'月'+ new Date(_this.value1[1]).getDate() + '日' 
          },
        })
        .then(function (res) {
          _this.handle(res.data[res.data.length-1].detail, res.data[res.data.length-1].time,res.data[res.data.length-1].id);
          
        });
          return false;
        } else {
          console.log("error submit!!");
          this.dialogFormVisible = true;
          return true;
        }
      });
    },
    onBeforeClose(done) {
      if (this.submitForm()) {
        return done(false);
      }
    },
  },
};
</script>

<style scoped>
.listhead {
  position: relative;

  margin: 10px auto;
}
.listhead h1 {
  font-size: 30px;
  text-align: center;
}
.listhead .createBtn {
  position: absolute;
  right: 0;
  top: -15px;
}
.block {
  margin-top: 20px;
  margin-left: 90px;
}
</style>